<template>
	<view class="container">
		<!-- 头部时间选择 -->
		<view class="header">
			
			<!-- 自由时间选择器 -->
		<picker mode="date" :value="selectedDate"  @change="switchDate">
			点击选择日期<view style="background-color: #ced8d2;">{{ selectedDate }}</view>
		</picker>
			
			
			<view class="quick-date">
				<text :class="['date-btn', activeDate === 'today' && 'active']" @click="switchDate('today')">今天</text>
				<text :class="['date-btn', activeDate === 'yesterday' && 'active']"
					@click="switchDate('yesterday')">昨天</text>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="stat-label">总收入</text>
				<text class="stat-value">¥{{ state.totalIncome }}</text>
			</view>
			<view class="stat-item">
				<text class="stat-label">总订单</text>
				<text class="stat-value">{{ state.totalOrders }}</text>
			</view>
		</view>

		<!-- 收入饼图 -->
		<view class="chart-container">
			<l-echart ref="pieChart" @finished="initPieChart"></l-echart>
		</view>

		<!-- 订单分布柱状图 -->
		<view class="chart-container">
			<l-echart ref="barChart" @finished="initBarChart"></l-echart>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import * as echarts from 'echarts'
 import {getdaylyFlow} from '@/api/mcslf/daylyflow'
	// 时间选择相关
	const selectedDate = ref(getToday())
	const activeDate = ref('today')
    const date = ref(getToday())
	// 时间格式化
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	// 自定义时间被选择回调
const	bindDateChange = function(e) {
		date.value = e.detail.value;
		console.log(date.value);
	}
	// 模拟数据
	const state = reactive({
		totalIncome: null,
		totalOrders: null,
		incomeData: [
      {
      }
		],
		orderData: {
			categories: ['保养', '洗车', '加油', '维修'],
			values:  []
		}
	})

	// 图表引用
	const pieChart = ref()
	const barChart = ref()

	// 日期处理
	function getToday() {
		const date = new Date()
		return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`
	}

	function pad(n) {
		return n < 10 ? '0' + n : n
	}

	// 时间改变触发函数
	function switchDate (type){


		activeDate.value = type
		const date = new Date()
		if (type === 'yesterday') {date.setDate(date.getDate() - 1)}
		if (type === 'today') {date.setDate(date.getDate())}
		selectedDate.value = `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`
		if (type != 'today' && type != 'yesterday'  ) {
			selectedDate.value = type.detail.value
			}
		
		// 时间改编后触发加载数据函数
    loadData()

    // console.log(res);
	}
const chang =(res)=>{
  state.incomeData = res.data.round;
  state.orderData.values = res.data.polylines;
  state.totalIncome =  res.data.PriceAmount;
  state.totalOrders =  res.data.dayOrderNum;

}

  const  loadData =async () => {
  let res = await getdaylyFlow(selectedDate.value);
    chang(res);
    initPieChart()
    initBarChart()
  }
	function dateChange() {
		// 实际开发中这里调用API获取数据
		activeDate.value = selectedDate.value === getToday() ? 'today' : ''
		loadData()
	}

	// 初始化饼图
	function initPieChart() {
		pieChart.value.init(echarts, chart => {
			chart.setOption({
				tooltip: {
					trigger: 'item'
				},
				legend: {
					bottom: 0
				},
				series: [{
					type: 'pie',
					radius: '60%',
					data: state.incomeData,
					label: {
						formatter: '{b}\n¥{c} ({d}%)',
						color: '#666'
					},
					itemStyle: {
						borderRadius: 5,
						color: function(params) {
							return changecoler(params.dataIndex )
						}
					}
				}]
			})
		})
	}
const changecoler =(res)=>{
    switch (res) {
      case 0:
        return '#36a2eb';
      case 1:
        return '#1db407';
      case 2:
        return '#4bc0c0';
      case 3:
        return '#974bc0';
    }
}
	// 初始化柱状图
	function initBarChart() {
		barChart.value.init(echarts, chart => {
			chart.setOption({
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: state.orderData.categories,
					axisLabel: {
						color: '#666'
					}
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					type: 'bar',
					data: state.orderData.values,
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#36a2eb'
							},
							{
								offset: 1,
								color: '#1db407'
							}
						]),
						borderRadius: 4
					}
				}]
			})
		})
	}

	// 模拟数据加载


	onMounted(() => {

		loadData()
	})
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background: #f5f6fa;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.date-picker {
			flex: 1;
		}

		.quick-date {
			display: flex;
			margin-left: 30rpx;

			.date-btn {
				padding: 10rpx 25rpx;
				margin-left: 20rpx;
				border-radius: 8rpx;
				background: #f0f2f5;
				color: #666;

				&.active {
					background: #36a2eb;
					color: white;
				}
			}
		}
	}

	.stats-card {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.stat-item {
			flex: 1;
			text-align: center;

			.stat-label {
				display: block;
				color: #999;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.stat-value {
				display: block;
				font-size: 40rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}

	.chart-container {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		height: 500rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.echarts {
			width: 100%;
			height: 100%;
		}
	}
</style>